// 秤 (仪表器)
function setOptionMeter(chart,myWeight) {
  var option = {
    backgroundColor: "transparent",
    color: ["#ffffff", "#ffffff", "#ffffff"],
 
    series: [{
      name: '业务指标',
      type: 'gauge',
      min: 0,
      max:300,
      center : ['50%', '40%'],//义盘的位置
      axisLine: {  //背景颜色
        show: false,
        lineStyle: {
          width: 5,
          shadowBlur: 0,
          color: [
            // [0.3, '#67e0e3'],
            // [0.7, '#37a2da'],
            // [1, '#fd666d']
            [0.3, '#ffffff'],
            [0.7, '#ffffff'],
            [1, '#ffffff']
          ]
        }
      },
      pointer: {//point为设置指针箭头的效果
          //这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！
  　　　　　　　　　　　　　　　　　　　　//当鼠标经过时会显示 箭头中间会显示一条白色的区域，这个区域可以通过css调整  如#map canvas[data-zr-dom-id=_zrender_hover_]{display: none!important;}
          show: true,
          //指针长度
          length:'50%',
          width:5,
          color:"#000"
      },
      textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
        color: '#003300'
      },
      detail : {//最下边数值的设置
          show : true,
          valueAnimation: true, //让值动起来  无效 看看原因
          offsetCenter: ['0', '65'],       // x, y，单位px
          formatter:'{value}KG',
          textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
            color: '#ffffff',
              fontSize : 18
          },
      },
      axisTick: {            // 坐标轴小标记
        show: true,        // 属性show控制显示与否，默认不显示
        splitNumber: 5,    // 每份split细分多少段
        length :8,         // 属性length控制线长
        lineStyle: {       // 属性lineStyle控制线条样式
            color: '#ffffff',
            width: 1,
            type: 'solid'
        }
      },
      axisLabel: {
        // distance: 30,
        fontSize: 10
      },
      splitLine: {           // 分隔线
        show: true,        // 默认显示，属性show控制显示与否
        length :15,         // 属性length控制线长
        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
           // color: '#eee',
            width: 2,
            type: 'solid'
        }
      },
      data: [{
        value: myWeight,
        // name: '体重',
      }]

    }]
  };

  chart.setOption(option, true);
}

//趋势(折线图)
function setOptionLine(chart,date,weight,bodyFat) {
  var option = {
    color: ["#d81d31", "#8279ea"],
    legend: {
      data: ['体重(KG)', '脂肪比(%)'],
      orient: 'horizontal',  
      top: 10,
      left: 'center',
      backgroundColor: '#fff',
      z: 100
    },
    grid: {
      containLabel: true,
      top: '18%',   // 等价于 y: '16%'
      left: '3%', 
      right: '5%',
      bottom: '3%',
    },
    tooltip: {
      show: true,
      trigger: 'axis',
    },
    xAxis: {//轴名标注
      type: 'category',
      boundaryGap: false,
      data:date,
      // show: false
      axisLine: { //x轴的设置
        lineStyle: {
            color: "#e4e4e4" //x轴的颜色。
        }
      },
      axisLabel: {//x轴文字设置
        textStyle: {
            fontSize: 10, //文字的字体大小
            color: "#a0a0a0"
        },
      },

    },
    yAxis: {//直角坐标系中的纵轴
      x: 'center',
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color:"#f1f1f1"
        }
      },
      axisLine: {
        lineStyle: {
            color: "#e4e4e4" //y轴的颜色。
        }
      },
      axisLabel: {//x轴文字设置
        textStyle: {
            fontSize: 10, //文字的字体大小
            color: "#a0a0a0"
        },
      },
  
    },
    
    series: [{
      name: '体重(KG)',
      type: 'line',
      smooth: true,
      data:weight
    }, {
      name: '脂肪比(%)',
      type: 'line',
      smooth: true,
      data: bodyFat
    }
  ]
  };
  chart.setOption(option);
}
module.exports={
  setOptionMeter,
  setOptionLine
}